<template>
  <div>
    <!--卡片-->
    <!-- :gutter间距20 class="mgb20"位于公共样式 el-col总的为24 -->
    <el-row :gutter="20" class="mgb20" style="padding: 20px">
      <el-col :span="6">
        <el-card>
          <div style="display: flex;justify-content: center;align-items: center">
            <div>
              <i class="el-icon-user" style="font-size: 30px;color: #3498db;margin-right: 20px"></i>
            </div>
            <div class="count">
              <div class="count-num">{{ allUserNum }}</div>
              <div>用户总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div style="display: flex;justify-content: center;align-items: center">
            <div>
              <i class="el-icon-office-building" style="font-size: 30px;color: #3498db;margin-right: 20px"></i>
            </div>
            <div class="count">
              <div class="count-num">{{ allStoreNum }}</div>
              <div>店铺总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div style="display: flex;justify-content: center;align-items: center" @click="toHelpCenter()">
            <div>
              <i class="el-icon-warning-outline" style="font-size: 30px;color: #3498db;margin-right: 20px"></i>
            </div>
            <div class="count">
              <div class="count-num">{{ allSuggestion }}</div>
              <div>反馈总数</div>
            </div>
            <el-badge :value="noReadNum" class="item" v-if="isNoRead">
            </el-badge>
          </div>

        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div style="display: flex;justify-content: center;align-items: center">
            <div>
              <i class="el-icon-tickets" style="font-size: 30px;color: #3498db;margin-right: 20px"></i>
            </div>
            <div class="count">
              <div class="count-num">{{ allInformationNum }}</div>
              <div>总信息数</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 图 -->
    <el-row :gutter="20" class="mgb20" style="padding: 20px">
      <el-col :span="12">
        <h3 class="mgb20">信息类型</h3>
        <div style="background-color:#fff;">
          <ve-histogram :data="columnChart" :settings="chartSettings" :extend="chartExtend"
          />
        </div>
      </el-col>
      <el-col :span="12">
        <h3 class="mgb20">7天新增</h3>
        <div style="background-color:#fff;">
          <ve-line :data="lineChart" :settings="lineChartSettings" ></ve-line >
        </div>
      </el-col>
    </el-row>
  </div>

</template>
<script>
import {getNumber,getInfoNum,getLine} from '@/api/mini/webIndex/webIndex'
export default {
  data() {
    return {
      allUserNum:'0',
      allStoreNum:'0',
      allSuggestion:'0',
      allInformationNum:'0',
      noReadNum:0,
      isNoRead:true,
      columnChart:{
        columns:['类型','总数'],
        rows:[
          {'类型':'房屋租赁','总数':0},
          {'类型':'求职信息','总数':0},
          {'类型':'招聘信息','总数':0},
          {'类型':'社会资讯','总数':0},
          {'类型':'推荐店铺','总数':0},
          {'类型':'旅行游记','总数':0},
          {'类型':'同城拼车','总数':0},
        ],
      },
      chartSettings: {},
      chartExtend: {
        series: {
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: '#86DF6C' },
                { offset: 1, color: '#468DFF' },
              ],
              global: false, // 是否为全局渐变
            },
          },
        },
      },

      lineChart:{

        columns:['时间','总数'],
        rows:[
          {'时间':'1','总数':0},
          {'时间':'2','总数':0},
          {'时间':'3','总数':0},
          {'时间':'4','总数':0},
          {'时间':'5','总数':0},
          {'时间':'6','总数':0},
          {'时间':'7','总数':0},
        ],
        pointLabels: true,
      },
      lineChartSettings: {
        itemStyle: {
          color: '#3498db' // 蓝色系
        }
      }

    }
  },
  computed: {},
  created() {
    this.init()
  },
  methods: {
    onChartReady(chart) {
      console.log(chart.getOption(),"6666"); // 检查图表的最终配置项
    },
    init(){
      // 卡片数据
      getNumber().then(res=>{
        console.log(res.data)
        this.allUserNum = res.data.miniUserPeopleNumber
        this.allStoreNum = res.data.miniStoreNumber
        this.allInformationNum = res.data.allInfoNumber
        this.allSuggestion = res.data.suggestionNumber
        this.noReadNum = res.data.isRead
        if(res.data.isRead){
          this.isNoRead = true
        }
      })
      // 柱状图数据
      getInfoNum().then(res =>{
        this.columnChart.rows[0]['总数'] = res.data.house
        this.columnChart.rows[1]['总数'] = res.data.job
        this.columnChart.rows[2]['总数'] = res.data.zhaopin
        this.columnChart.rows[3]['总数'] = res.data.society
        this.columnChart.rows[4]['总数'] = res.data.store
        this.columnChart.rows[5]['总数'] = res.data.week
        this.columnChart.rows[6]['总数'] = res.data.car
      })
      // 折线图数据
      getLine().then(res=>{
        this.lineChart.rows[6]['时间'] = res.data.date[0]
        this.lineChart.rows[5]['时间'] = res.data.date[1]
        this.lineChart.rows[4]['时间'] = res.data.date[2]
        this.lineChart.rows[3]['时间'] = res.data.date[3]
        this.lineChart.rows[2]['时间'] = res.data.date[4]
        this.lineChart.rows[1]['时间'] = res.data.date[5]
        this.lineChart.rows[0]['时间'] = res.data.date[6]

        this.lineChart.rows[6]['总数'] = res.data.count[0]
        this.lineChart.rows[5]['总数'] = res.data.count[1]
        this.lineChart.rows[4]['总数'] = res.data.count[2]
        this.lineChart.rows[3]['总数'] = res.data.count[3]
        this.lineChart.rows[2]['总数'] = res.data.count[4]
        this.lineChart.rows[1]['总数'] = res.data.count[5]
        this.lineChart.rows[0]['总数'] = res.data.count[6]
      })


    },
    // 跳转投诉/建议
    toHelpCenter(){
      this.$router.push({path:"mini/center"})
    }
  },

}
</script>
<style scoped>
.count {
  text-align: center;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  height: 50px;

}
.item{
  margin-top: 10px;
 margin-right: 40px;
}
.count-num {
  font-size: 22px;
}
.mgb20{
  margin-left: 10px;
}
.count-is{
  display: flex;
  cursor: pointer;
}
.count-is-child{
  flex:1;
}
.z{
  text-align: center;
}
</style>
